<template>
  <!-- 赛事相册 -->
  <div class="pageWrap">
    <!-- 搜索 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.seaV" style="width:250px;" clearable placeholder="请输入赛事名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 内容 -->
    <el-table :data="tableData.slice((curP-1)*10,curP*10)" stripe style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="expand">
            <el-form-item label="简介：">
              <!-- class="short" -->
              <span>{{ props.row.info}}</span>
            </el-form-item>
            <el-form-item label="图片">
              <div class="imgB" v-for="(v,i) in props.row.list" :key="i">
                <i class="el-icon-error del" @click="delPic(props.$index,i,props.row)"></i>
                <img :src="v" v-showImgArr="{list:props.row.list,ind:i}" />
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center">
        <template slot-scope="{row}">
          <img :src="row.headImgUrl" alt class="headImg" />
        </template>
      </el-table-column>
      <el-table-column prop="nikeName" label="昵称" align="center"></el-table-column>
      <el-table-column prop="matchName" label="赛事名称" align="center"></el-table-column>
      <el-table-column prop="creatTime" label="创建时间" align="center"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row,$index}">
          <el-button type="danger" icon="el-icon-delete" circle @click="del(row.id,$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pageT"
      :current-page.sync="curP"
      :page-size="10"
      layout="total, prev, pager, next,jumper"
      :total="tableData.length"
    ></el-pagination>
  </div>
</template>

<script>
var allData = [];
export default {
  data() {
    return {
      tableData: [],
      formInline: {
        seaV: "",
      },
      curP: 1,
    };
  },
  methods: {
    onSubmit() {
      this.tableData = allData;
      this.tableData = this.tableData.filter((v) => {
        return v.matchName.indexOf(this.formInline.seaV) >= 0;
      });
      this.$forceUpdate();
    },
    init() {
        let mid=this.$Base64.decode(sessionStorage.getItem("MandA"))
      this.$axios.get("/sbr/match/getGradePicLists?matchId="+mid).then((res) => {
        let rr = res.data.data;
        rr.forEach((v) => {
          let ll = v.urls.split(";");
          for (let a = 0; a < ll.length; a++) {
            ll[a] = this.$url + "/sbr/query_pic?name=" + ll[a];
          }
          v.list = ll;
        });
        this.tableData = rr;
        allData = JSON.parse(JSON.stringify(rr));
      });
    },
    del(id, i) {
      this.$confirm("此操作将永久删除该报名信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("/sbr/match/delGradePics", { params: { id: id } })
            .then((res) => {
              let ii = (this.curP - 1) * 10 + i;
              this.tableData.splice(ii, 1);
              let ai = allData.findIndex((v) => {
                return v.id == id;
              });
              allData.splice(ai, 1);
              this.curP = 1;
              this.$forceUpdate();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    delPic(ii, i, row) {
      this.$confirm("此操作将永久删除该报名信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let uu = row.urls.split(";");
          uu.splice(i, 1);
          uu = uu.join(";");
          row.urls = uu;
          this.$axios.post("/sbr/match/editGradePics", row).then((res) => {
            row.list.splice(i, 1);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped>
.img {
  width: 100px;
}
.headImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.short {
  width: 50%;
  float: left;
}
.pageT {
  display: table;
  margin: 0 auto;
}
.imgB {
  width: 100px;
  display: inline-block;
  position: relative;
  margin-right: 15px;
  position: relative;
  /* overflow: hidden; */
}
.del {
  color: red;
  font-size: 20px;
  position: absolute;
  top: -10px;
  right: -10px;
}
.imgB img {
  float: left;
  width: 100%;
}
</style>

